<template>
  <div id="map"></div>
</template>

<script>
import mapboxgl from 'mapbox-gl'

export default {
  name: 'MapComponent',
  data () {
    return {
      map: null
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      const token = 'pk.eyJ1IjoibHp1bml1anAwOCIsImEiOiJjajJqcmlrMTYwMDI2MzJuaXd0NmRtZTl5In0.eMIg2fpiFaDInq2YVE4_2A'
      mapboxgl.accessToken = token
      this.map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [103.081163, 37.1612],
        zoom: 3.45,
        minZoom: 2,
        maxZoom: 22
      })
      const that = this
      that.map.on('load', e => {
        that.$emit('map-loaded', that.map)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
html,
body,
#map,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
